<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/static/pear/admin/css/other/login.css"/>
</head>
<!-- 代 码 结 构 -->
<body background="/static/pear/admin/images/background.svg" style="background-size: cover;">
<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <img class="logo" src="/static/pear/admin/images/logo.png"/>
        <div class="title">Pear Admin</div>
        <div class="desc">
            明 湖 区 最 具 影 响 力 的 设 计 规 范 之 一
        </div>
    </div>
    <div class="layui-form-item">
        <input placeholder="账 户 :" name="username" value="18675867241" lay-verify="required" hover class="layui-input"/>
    </div>
    <div class="layui-form-item">
        <input placeholder="密 码 :" type="password" name="password" value="123456" lay-verify="required" hover
               class="layui-input"/>
    </div>
    <div class="layui-form-item">
        <input type="checkbox" name="check" title="记住密码" lay-skin="primary" checked>
    </div>
    <div class="layui-form-item">
        <button type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
            登 录
        </button>
    </div>
</form>
<!-- 资 源 引 入 -->
<script src="/static/pear/component/layui/layui.js"></script>
<script src="/static/pear/component/pear/pear.js"></script>
<script>
    layui.use(['form', 'button', 'popup', 'toast'], function() {
        var form = layui.form;
        var button = layui.button;
        var popup = layui.popup;
        var toast = layui.toast;

        // 登 录 提 交
        form.on('submit(login)', function(form) {

            /// 验证

            /// 登录
            let btn = button.load({elem: '.login'});

            fetch('/admin/login', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(form.field),
            }).then(function(response) {
                return response.json();
            }).then(function(ret) {
                btn.stop();  // 请求成功之后停止按钮 loading
                console.log(ret);
                if (ret.status === 'fail') {
                    toast.warning({message: ret.message, position: 'topRight'});
                } else if (ret.status === 'success') {
                    toast.success({message: ret.message, position: 'topRight'});
                    location.href = '/admin/';
                }
            });

            /// 动画

            return false;
        });
    });
</script>
</body>
</html>
